<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
  	<title>联系我们--东西互联网</title>
    <link rel="stylesheet" href="css/mui.css" />
    <link rel="stylesheet" href="css/muiicon.css" />
    <link rel="stylesheet" href="css/jquery.mmenu.all.css" />
    <link rel="stylesheet" href="css/default.css" />
     <style>
    			p {
				text-indent: 22px;
				padding: 5px 8px;
			}
			html,body,.mui-content {
				background-color: #fff;
			}
			h3 {
				text-align: center;
				padding: 20px 0;
				font-size: 20px;
			}
			h4 {
				margin-left: 15px;
			}
    	
    </style>
</head>
	<body>
			<div class="page">
				<header class="mui-bar mui-bar-nav" >
					 <a href="javascript:history.back();"  class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span> <span class="title"> </span></span>
					</a>
					<h1 class="mui-title" id="title">联系我们</h1>
				</header>
				<div class="mui-content">
					<div class="mui-content-padded" style="padding-top: 20px;">
						<h4>联系方式</h4>
							<p>
								<span class="mui-icon mui-icon-qq" style="color: rgb(224,125,125);"> </span> 3037788649  , 3096665744
							</p>
							<p>
								<span class="mui-icon mui-icon-phone-filled" style="color: rgb(224,125,125);"> </span><a href="tel:0755-6262578">0755-6262578</a>
							</p>
							<p>
								<span class="mui-icon mui-icon-email-filled" style="color: rgb(224,125,125);"> </span> <a href="mailto:cy@chnyoo.cn">cy@chnyoo.cn</a>
							</p>
						    <p>
								<span class="mui-icon mui-icon-map" style="color:  limegreen;"> </span>  广东省深圳市罗湖区罗湖街道
							</p>   
						
						<h4>公交线路1</h4>
						<p>乘坐  1路  30路  31路  32路， 到御金台母婴乐乐购站下车；</p>			
						<h4>公交线路2</h4>
						<p>乘坐   3路   6路  15路   16路，到建设路站下车；</p>		
						<h4>公交线路3</h4>
						<p>乘坐  7路  23路   27路   43路  82路，到大世界站下车</p>		
					</div>	
					<div class="footer">
						<div class="splite"></div>
						<div class="bottom-menu">
								<a href="#">首页</a>
								<a href="#">产品中心</a>
								<a href="#">会员中心</a>
								<a href="#">代理加盟</a>
								<a href="#">关于我们</a>
						</div>
						<div class="copyright">  2015 &copy; chedaowang.cn</div>
					</div>
				</div>
			</div>
		<nav id="searchCategory" style="width: 90%;">
			<div id="app">
					<h5>产品系列</h5>
					<span  class="mui-icon mui-icon-closeempty mui-pull-right search-category-close"></span>
					 <div class="search-category-list">
		                  <div class="search-category-item active"><a href="#">钻 石</a></div>
		                  <div class="search-category-item"><a href="#">彩 宝</a></div>
		                  <div class="search-category-item"><a href="#">珍 珠</a></div>
		                  <div class="search-category-item"><a href="#">翡 翠</a></div>
		          	 </div>
				<ul style="clear: both; ">
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-1" class="mm-arrow">钻石大小</a>
						<div id="search-cate1-1" class="Panel">
							<ul class="search-category-sublist">
								<li><span>2ct以上</span></li>
								<li><span>2ct</span></li>
								<li><span>1.5ct</span></li>
								<li><span>1ct</span></li>
								<li><span>0.9ct</span></li>
								<li><span>0.8ct</span></li>
							</ul>
					</div>
					</li>
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-2" class="mm-arrow">主石大小</a>
						<div id="search-cate1-2" class="Panel ">
							<ul class="search-category-sublist">
								<li><span>9x</span></li>
								<li><span>8x</span></li>
								<li><span>6x</span></li>
								<li><span>5x</span></li>
								<li><span>4以下</span></li>
								<li><span>9x</span></li>
								<li><span>8x</span></li>
								<li><span>6x</span></li>
								<li><span>5x</span></li>
								<li><span>4以下</span></li>
								<li><span>9x</span></li>
								<li><span>8x</span></li>
								<li><span>6x</span></li>
								<li><span>5x</span></li>
								<li><span>4以下</span></li>
							</ul>
						</div>	
					</li>
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-3" class="mm-arrow">珍珠大小</a>
						<div id="search-cate1-3" class="Panel ">
							<ul class="search-category-sublist">
								<li><span>9-10mm</span></li>
								<li><span>7-8mm</span></li>
								<li><span>5-6mm</span></li>
								<li><span>16mm以上</span></li>
								<li><span>9-10mm</span></li>
								<li><span>7-8mm</span></li>
								<li><span>5-6mm</span></li>
								<li><span>16mm以上</span></li>
								<li><span>9-10mm</span></li>
								<li><span>7-8mm</span></li>
								<li><span>5-6mm</span></li>
								<li><span>16mm以上</span></li>
							</ul>
						</div>	
					</li>
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-4" class="mm-arrow">石头形状</a>
						<div id="search-cate1-4" class="Panel ">
							<ul class="search-category-sublist">
								<li><span>枕形</span></li>
								<li><span>圆形</span></li>
								<li><span>心形</span></li>
								<li><span>水滴形</span></li>
								<li><span>三角形</span></li>
								<li><span>马眼形</span></li>
								<li><span>枕形</span></li>
								<li><span>圆形</span></li>
								<li><span>心形</span></li>
								<li><span>水滴形</span></li>
								<li><span>三角形</span></li>
								<li><span>马眼形</span></li>
								<li><span>枕形</span></li>
								<li><span>圆形</span></li>
								<li><span>心形</span></li>
								<li><span>水滴形</span></li>
								<li><span>三角形</span></li>
								<li><span>马眼形</span></li>
							</ul>
						</div>	
					</li>
					<li>
						<em class="Counter"></em>
						<a href="#search-cate1-5" class="mm-arrow">款式</a>
						<div id="search-cate1-5" class="Panel ">
							<ul class="search-category-sublist">
								<li><span>戴妃</span></li>
								<li><span>戴妃</span></li>
								<li><span>戴妃</span></li>
							</ul>
						</div>	
					</li>
				</ul>
			</div>
			<a id="btnSearch"  class="mui-btn mui-btn-danger" ><span class="btn mui-icon mui-icon-search"></span>查询</a>
		</nav>	
		
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/jquery.mmenu.min.all.js" ></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js" ></script>
		<script>
			 $(function(){
			 	/**
			 	 * 初始化筛选选项
			 	 */
		 		$("#searchCategory").mmenu({
					extensions: ["theme-white","pagedim-black"],//,"fullscreen"
					offCanvas: {
			               position  : "right",
			               zposition : "front"
		           },
					slidingSubmenus:false,
					navbar		: {
						title	: "筛选条件"
					} 
				});
			 	/*选中与取消*/
		 	 	$(".search-category-sublist li").on('click',function(){
		 	 			var m = $(this).parent().parent().parent();
		 	 			if($(this).hasClass("active")){
		 	 				m.find(".mm-counter").text("");
		 	 				$(this).removeClass("active");
		 	 			}else{
		 	 				var text=$(this).find('span').text();
			 	 			m.find(".mm-counter").text(text);
			 	 			$(this).addClass("active");
			 	 			$(this).siblings(".active").removeClass("active");
			 	 			m.find(".mm-arrow").click();
		 	 			}
		 	 	});
		 	 	$("#searchCategory .search-category-close").click(function(){
		 	 		$("#searchCategory").data( "mmenu" ).close();
		 	 	});
			 	 /*点击搜索按钮*/
			 	 $("#btnSearch").on('click',function(){
			 	 	$("#searchCategory").data( "mmenu" ).close();
			 	 		//TODO  提交查询参数
			 	 });
			 })
		</script>
	</body>
</html>
